<template>
  <div class="listNoteIndexMain">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7">
        <Feature :titleName="'常用方案'">
          <slot>
            <el-skeleton :rows="1" animated v-if="skeletonBotType" v-for="item in 5" class="zylMB30"/>
            <template v-for="(item, index) in noteCollectionList">
              <div class="newListMain" @click="jump(item, '1')">
                <div class="newListTitle zylSpace zylTransition">{{ item.title }}</div>
                <div class="newListTime">{{ item.creationtime }}</div>
              </div>
            </template>
          </slot>
        </Feature>
        <Feature :titleName="'好文推荐'">
          <slot>
            <el-skeleton :rows="1" animated v-if="skeletonBotType" v-for="item in 5" class="zylMB30"/>
            <template v-for="(item, index) in networkCollectionList">
              <div class="newListMain" @click="jump(item, '2')">
                <div class="newListTitle zylSpace zylTransition">{{ item.title }}</div>
                <div class="newListTime">{{ item.creationtime }}</div>
              </div>
            </template>
          </slot>
        </Feature>
      </el-col>
      <el-col :xs="24" :sm="17" :md="17" :lg="17" :xl="17">
        <Feature :titleName="'笔记列表'">
          <slot>
            <el-row :gutter="10">
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-if="skeletonListType" v-for="item in 12">
                <el-skeleton animated class="zylMB30">
                  <template #template>
                    <el-skeleton-item variant="image" style="width: 100%; height: 200px" />
                    <div class="zylSkeletonText">
                      <el-skeleton-item variant="p" class="skeletonMb10"/>
                      <el-skeleton-item variant="p" class="skeletonMb10"/>
                      <el-skeleton-item variant="p" class="skeletonMb10"/>
                    </div>
                  </template>
                </el-skeleton>
              </el-col>
              <template v-for="(item, index) in noteList">
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                  <div class="listNoteList" @click="jump(item, '1')">
                    <div class="listNoteListLable">{{ item.label }}</div>
                    <img :src="item.imgurl">
                    <div class="listNoteListTitle zylTransition">{{ item.title }}</div>
                    <div class="listNoteListTime">{{ item.creationtime }} 【预览】{{ item.flow }} 次</div>
                    <div class="listNoteListText" v-html="item.brief"></div>
                  </div>
                </el-col>
              </template>
            </el-row>
          </slot>
        </Feature>
        <div class="zylPaginationMain zylMB10">
          <el-pagination background :total="pagList.total" :page-size="pagList.pageSize" @current-change="handlePageChange" layout="prev, pager, next"></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import '@/assets/scss/index.scss';
import Feature from '@/components/Feature';
import Interface from './serve/api';
export default {
  // 方案列表
  name: 'programmeIndex',
  components: {
    Feature,
  },
  data () {
    return {
      noteList: [],
      noteCollectionList: [],
      networkCollectionList: [],
      // 分页
      pagList: {
        total: 0,
        pageNum: 1,
        pageSize: 12,
      },
      skeletonTopType: true,
      skeletonBotType: true,
      skeletonListType: true,
    };
  },
  mounted () {
    this.getNotearticleStateLabel();
    this.getNotearticleNew();
    this.getZylNetworkCollection();
  },
  methods: {
    // 方案列表
    getNotearticleStateLabel () {
      let params = {
        state: '是',
        label: '方案',
        pageNum: this.pagList.pageNum,
        pageSize: this.pagList.pageSize,
      };
      Interface.getNotearticleStateLabel(params).then(res => {
        if (res.status === 200) {
          this.skeletonListType = false;
          this.noteList = res.data.list;
          this.pagList.total = res.data.total;
        };
      })
    },

    // 查询收藏
    getNotearticleNew () {
      let params = {
        state: '是',
        label: '方案',
        collection: '是',
      };
      Interface.getNotearticleNew(params).then(res => {
        if (res.status === 200) {
          this.skeletonTopType = false;
          this.noteCollectionList = res.data;
        };
      })
    },

    // 查询网文收藏
    getZylNetworkCollection () {
      let params = {
        state: '是',
        nettype: '网文',
        collection: '是',
      };
      Interface.getZylNetworkCollection(params).then(res => {
        if (res.status === 200) {
          this.skeletonBotType = false;
          this.networkCollectionList = res.data;
        };
      })
    },


    // 分页监听
    handlePageChange (val) {
      this.pagList.pageNum = val;
      this.getNotearticleStateLabel();
    },

    // 跳转
    jump (item, index) {
      let routeUrl;
      switch (index) {
        case '1':
          routeUrl = this.$router.resolve({
            path: '/content/Index',
            query: {
              id: item.id,
            }
          });
          window.open(routeUrl.href, '_blank');
          break
        case '2':
          window.open(item.neturl, '_blank');
          break
      };
    },
  }
}
</script>
